Skip to main content

Component Styling

Datafor offers a diverse range of styling options that allow users to customize and enhance components such as charts, tables, and maps. These styling features not only improve the visual appeal of reports but also enhance data readability and communication effectiveness.

Basic Styles​

Basic style settings allow customization of component elements like colors, fonts, and backgrounds, helping users create report styles that align with brand or personal preferences.

Color Settings​

  • Series Colors: Users can choose different colors for each data series in a chart. Datafor provides a default color palette, but users can customize colors according to their needs or even import palettes that align with their brand identity.
  • Data Point Colors: In specific chart types like scatter plots and bubble charts, users can select unique colors for each data point.
  • Gradient Fill: Gradient fill effects can be applied to bar and column charts to visually represent data differences through varying color intensities.

Font Settings​

  • Font Types: Users can select from various font types to match the report's style, including Arial, Calibri, Times New Roman, and others.
  • Font Size: Font size can be adjusted for different text elements, such as titles, axis labels, and data labels.
  • Font Colors: Font colors can be customized based on the background color or brand identity, ensuring text is clear and readable.

Background and Borders​

  • Background Color: Users can set background colors for components, often used to differentiate sections of a report or highlight specific components.
  • Background Image: Background images are supported, allowing users to use company logos, brand images, or custom designs as component backgrounds.
  • Border Settings: Components can be enhanced with borders, where users can adjust the color, width, and style (solid, dashed, etc.) to emphasize boundaries.

Shadows and Transparency​

  • Shadow Effects: Shadow effects can be added to components to create a three-dimensional appearance, commonly used to highlight key charts or data.
  • Transparency Adjustment: Users can adjust the transparency of components or their internal elements to create depth or allow background content to show through.

Data Labels and Tooltips​

Data labels and tooltips are essential for user interaction with components, providing direct or supplementary data details.

Data Label Settings​

  • Show Data Labels: Users can choose to display or hide data labels in charts. Data labels are shown directly above data points, bars, or other graphical elements for easy value viewing.
  • Data Label Content: Data labels can be customized to display values, percentages, category names, and more.
  • Data Label Format: Users can customize the format of data labels, including numerical formats (thousands separator, decimal places, currency symbols), font style, and color.
  • Label Position: Data label positions can be adjusted as needed, such as above, inside, left, or right of bars in a column chart.

Tooltips​

  • Tooltip Content: Tooltips appear when users hover over a data point, displaying a pop-up with information. Users can customize tooltip content to include additional fields.
  • Tooltip Style: Tooltip background colors, fonts, and border styles can be customized to ensure consistency with the component and overall report design.
  • Custom Tooltip Pages: Datafor allows users to design custom tooltip pages, which display a mini-report with multiple components when hovering over data points, offering more detailed information.

Conditional Formatting​

  • Color-Based Conditional Formatting: Conditional formatting lets users apply specific colors based on data values. For example, applying red for bars above a threshold and green for those below in a column chart.
  • Data Bars and Icon Sets: In table and matrix components, users can represent relative data sizes or statuses (e.g., up, down, stable) using data bars and icon sets.
  • Rule Settings: Users can set multiple rules for conditional formatting, such as thresholds or categorical conditions, and Datafor will automatically apply the styles based on these rules.

Animations and Transitions​

Animations and transitions make report interactions smoother and help users maintain context during data changes.

Component Loading Animation​

  • Initial Loading Animation: When components load for the first time, animations such as fades or expansions can be displayed to increase visual appeal.
  • Data Update Animation: Upon data updates or filter applications, components show smooth animation transitions, aiding users in understanding the data changes.

Report Page Transition Animation​

  • Page Transition Animation: When users switch between pages in a report, Datafor offers transition animations that make page navigation feel more natural and coherent.
  • Dynamic Data Refresh Animation: Datafor animates the data refresh process in reports, helping users stay aware of data changes.

Responsive Design​

  • Mobile Optimization: Datafor supports responsive design, allowing reports to automatically adjust component layouts and styles based on the screen size, ensuring a good display on mobile, tablet, and desktop devices.
  • Visual Layout Switching: Users can create specialized layouts for mobile devices and choose different components to display on different devices to optimize the user experience.

Conclusion​

Datafor provides a rich and flexible set of component styling options that enable users to meet a wide range of customization needs in data reports, from basic to advanced. These styling features not only enhance the visual appeal and professionalism of reports but also improve the clarity and readability of data presentations.